<script lang="ts">
  import type { TabType } from "$lib/ebm";
  import Tabs from "$lib/Tabs.svelte";

  import QcEditor from "./QcEditor.svelte";
  import QwEditor from "./QwEditor.svelte";
  import QsEditor from "./QsEditor.svelte";

  import { tooltip } from "$lib/js/tooltip";
  export let file_id = "";
  // List of tab items with labels, values and assigned components
  let items: TabType[] = [
    {
      label: "Quiz Words",
      value: 1,
      component: QwEditor,
      attributes: [{ k: "file_id", v: file_id }],
    },
    {
      label: "Quiz Cards",
      value: 2,
      component: QcEditor,
      attributes: [{ k: "file_id", v: file_id }],
    },
    {
      label: "EBP Settings",
      value: 3,
      component: QsEditor,
      attributes: [{ k: "file_id", v: file_id }],
    },
  ];
</script>

<div class="h-full w-full">
  <Tabs {items} />
</div>
